<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>积分抽奖活动</title>
    <style>
        body,
        div,
        span {
            margin: 0;
            padding: 0;
        }

        .bg {
            height: 546px;
            background-image: url(./img/banner-bg.jpg);
            position: relative;
        }

        .container {
            position: absolute;
            width: 874px;
            height: 458px;
            background-image: url(./img/bg.png);
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .item {
            width: 270px;
            height: 100px;
            position: absolute;
            padding: 5px;
            box-sizing: border-box;
            text-align: center;
            background: #622230;
            border: 1px solid #722536;
            border-radius: 5px;
        }

        .item-center {
            width: 614px;
            height: 198px;
            background-image: url(./img/middle-bg.png);
            position: absolute;
            top: 130px;
            left: 130px;
            box-sizing: border-box;
            text-align: center;
            border: 1px solid #722536;
            border-radius: 5px;
            padding: 0 20px;
        }

        .item-center>div {
            display: inline-block;
            margin: 40px auto;
        }

        .item-center .center>img {
            float: left;
        }

        .item-center .center>div {
            float: left;
            color: #ffd200;
            font-size: 30px;
            font-weight: bold;
            margin: 17px 0 0 18px;
        }

        .item-center .center>div>span {
            margin: 0 8px;
        }

        .item:nth-child(4),
        .item:nth-child(8) {
            width: 100px;
            height: 200px;
        }

        .item:nth-child(1) {
            top: 22px;
            left: 26px;
        }

        .item:nth-child(2) {
            top: 22px;
            left: 302px;
        }

        .item:nth-child(3) {
            top: 22px;
            right: 26px;
        }

        .item:nth-child(4) {
            top: 129px;
            right: 26px;
        }

        .item:nth-child(5) {
            bottom: 22px;
            right: 26px;
        }

        .item:nth-child(6) {
            bottom: 22px;
            left: 302px;
        }

        .item:nth-child(7) {
            bottom: 22px;
            left: 26px;
        }

        .item:nth-child(8) {
            top: 129px;
            left: 26px;

        }

        .item>img {
            max-height: 75px;
            position: absolute;
            left: 30px;
            top: 15px;
        }

        .item>span {
            font-size: 19px;
            color: #ffb100;
            font-weight: bold;
            position: absolute;
            left: 102px;
            top: 36px;
            width: 164px;
        }

        .item:nth-child(4)>img,
        .item:nth-child(8)>img {
            left: 50%;
            transform: translateX(-50%);
        }

        .item:nth-child(4)>span,
        .item:nth-child(8)>span {
            left: 50%;
            transform: translateX(-50%);
            top: auto;
            bottom: 36px;
        }

        .start-btn {
            width: 210px;
            height: 102px;
            background-image: url(./img/btn.png);
            float: right;
            cursor: pointer;
        }

        .active {
            background-color: #ffd100;
        }

        .active>span {
            color: #470c1b;
        }

        /* 对话框 */
        .mask-dialog {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, .5);
            display: none;
        }

        .mask-content {
            width: 400px;
            background-color: #fff;
            position: absolute;
            left: 50%;
            top: 30%;
            transform: translate(-50%, -50%);
            box-sizing: border-box;
        }

        .mask-content>.head {
            height: 50px;
            line-height: 50px;
            background-color: #e99c3d;
            border-bottom: 1px solid #ddd;
            box-sizing: border-box;
            padding: 0 20px;
        }

        .mask-content>.head>.title {
            float: left;
            color: #fff;
            font-size: 18px;
        }

        .mask-content>.head>.close {
            float: right;
            color: #fff;
            font-size: 42px;
            cursor: pointer;
        }

        .mask-content>.content {
            text-align: center;
            margin: 20px;
            color: #622230;
            font-weight: bold;
            font-size: 20px;
        }

        .mask-content>.bottom {
            text-align: right;
            margin: 20px;
        }

        .mask-content>.bottom>.button {
            background-color: #fca825;
            height: 28px;
            cursor: pointer;
            display: inline-block;
            line-height: 28px;
            color: #fff;
            padding: 0 10px;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="container">
            <!-- 第一排，从左到右 -->
            <div class="item">
                <img src="./img/prize_1.png" alt="">
                <span>IphoneX</span>
            </div>
            <div class="item">
                <img src="./img/prize_2.png" alt="">
                <span>现金50元</span>
            </div>
            <div class="item">
                <img src="./img/prize_3.png" alt="">
                <span>HUAWEI</span>
            </div>
            <!--  -->
            <div class="item">
                <img src="./img/prize_4.png" alt="">
                <span>现金10元</span>
            </div>

            <div class="item">
                <img src="./img/prize_5.png" alt="">
                <span>谢谢参与</span>
            </div>
            <div class="item">
                <img src="./img/prize_6.png" alt="">
                <span>手机优惠券</span>
            </div>
            <div class="item">
                <img src="./img/prize_7.png" alt="">
                <span>电脑优惠券</span>
            </div>
            <div class="item">
                <img src="./img/prize_8.png" alt="">
                <span>U盘</span>
            </div>
            <!-- 中间的“点击抽奖” -->
            <div class="item-center">
                <div class="center">
                    <img src="./img/logo.png" alt="">
                    <div>还可以抽奖<span class="number-txt">n</span>次</div>
                </div>
                <div class="start-btn"></div>
            </div>
        </div>

        <!-- 弹出框 -->
        <div class="mask-dialog">
            <div class="mask-content">
                <div class="head">
                    <span class="title">温馨提示</span>
                    <span class="close">&times;</span>
                </div>
                <div class="content">
                    <span class="price">恭喜您获得***</span>
                </div>
                <div class="bottom">
                    <span class="button">再来一次</span>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function () {
            var number = 5;
            var numberTxt = document.querySelector(".number-txt");
            var container = document.querySelector(".container");
            var startBtn = document.querySelector(".start-btn");
            var items = document.querySelectorAll(".item");
            var dialog = document.querySelector(".mask-dialog");
            var price = dialog.querySelector(".price");
            var close = document.querySelector(".close");
            var button = document.querySelector(".button");
            var currentIndex = null;
            var index = -1;
            var timer = null;
            function init() {
                // 1. 初始化抽奖次数
                numberTxt.innerText = number;
                initEvents();
            }

            function initEvents() {
                // 1. 绑定'开始抽奖'事件
                startBtn.addEventListener("click", onStartBtn);
                // 2. 绑定弹框关闭事件
                close.addEventListener("click", onCloseDialog);
                // 3. 再来一次按钮
                button.addEventListener("click", onConfirmDialog);
            }
            // 抽奖按钮点击事件
            var onStartBtn = function () {
                // 定时器正在遍历时直接return
                if (timer) return;
                index = -1
                // 如果剩余次数为0，则不能再抽奖了
                if (number === 0) return;
                // 开始抽奖
                runGame(100);
            }
            var runGame = function (duration) {
                var select = 3000 + Math.random() * 3000;
                timer = setInterval(() => {
                    // 当中奖时，清除定时器，弹框显示中奖结果
                    select -= 200;
                    if (select <= 200) {
                        clearInterval(timer);
                        openDialog();
                        timer = null;
                        return;
                    }

                    // 处理了边界条件，使currentIndex一直在0-8循环
                    currentIndex = ++index % items.length;
                    // 去掉之前添加的active
                    items.forEach(function (node) {
                        node.classList.remove("active")
                    })

                    // 给当前点到的元素加active
                    items[currentIndex].classList.add("active");
                }, duration);
            }

            // 打开弹框
            function openDialog() {
                // 1. 剩余次数减一，更新界面上显示的次数
                numberTxt.innerText = --number;
                // 2. 更新弹框里的"再来一次"->"确认"
                if (number === 0) button.innerText = "确认";
                dialog.style.display = 'block';
                if (currentIndex === 0) {
                    price.innerText = "很遗憾您未中奖!";
                } else {
                    price.innerText = "恭喜您获得" + items[currentIndex].children[1].innerText;
                }
            }

            // 关闭弹窗
            var onCloseDialog = function () {
                dialog.style.display = 'none';
            }

            // 再来一次/确认
            var onConfirmDialog = function () {
                index = -1
                dialog.style.display = 'none'
                if (number === 0 || timer) return;
                runGame(100);
            }

            init();
        })()

    </script>
</body>

</html>